<template>
  <div class="widget-view"
       @click="handleSelectWidget(index)"
       :class="{active: selectWidget.key == element.key,}">
    <div class="title">{{selectedElement.group}}</div>
    <div class="widgetBox">
      <el-form-item :class="{ 'is-required': element.config.required}"
                    :label="selectedElement.group">
        <el-checkbox-group v-model="element.config.defaultValue" disabled>
          <el-checkbox :label="item" v-for="(item, itemIndex) in selectedElement.items">{{item}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  export default {
    name: 'WidgetSelectedItem',
    props: {
      element: {  // fieldList的配置
        type: Object,
        default () {
          return {}
        }
      },
      selectedElement: {  // selected的配置
        type: Object,
        default () {
          return {}
        }
      },
      'select': {},
      'data': {},
      'index': {
        type: Number
      },
      listKey: {
        type: String,
        default: 'list'
      }
    },
    data () {
      return {
        selectWidget: this.select,
      }
    },
    watch: {
      select (val) {
        this.selectWidget = val
      },
      selectWidget: {
        handler (val) {
          this.$emit('update:select', val)
        },
        deep: true
      },
    },
    methods: {
      handleSelectWidget (index) {
        this.selectWidget = this.data[this.listKey][index]
      },
    }
  }
</script>
